<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <div class="page-header">
            <h1 class="page-title">{{title}}</h1>
            <div class="z-pop_question">
                <el-popover
                        ref="popoverq"
                        placement="bottom-start"
                        width="400"
                        trigger="hover">
                    <p class="z-jiao">
                        每个角色可以设置不同的后台功能权限，比如：业务员角色，仓库管理员角色，财务角色。然后账号关联某个角色，就拥有该角色下的所有功能权限
                        <a href="javascript:;">查看更多帮助</a>
                    </p>
                </el-popover>
                <i v-popover:popoverq class="el-icon-question"></i>
            </div>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>系统<span>/</span>账号管理</div>
        </div>
        <div class="list-content">
            <!--条件筛选-->
            <div class="content_item_filter clearfix">
                <div class="input-select fl btn-radid_none">
                    <div class="filter-form filter-form-one clearfix">
                        <el-input placeholder="角色名称" v-model="conditions.name.value" clearable class="minW40 z_input-holder"></el-input>
                        <!--<el-select placeholder="角色类型" v-model="conditions.type.value" clearable class="z_select-holder">
                            <el-option
                                    v-for="roleType in roleTypeList"
                                    :key="roleType.value"
                                    :label="roleType.name"
                                    :value="roleType.value">
                            </el-option>
                        </el-select>-->
                    </div>
                    <div class="filter-operate">
                        <el-tooltip class="item" content="查询" placement="bottom-start">
                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" content="清空" placement="bottom-start">
                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
                        </el-tooltip>
                    </div>
                </div>
                <div class="filter-btn fr">
                    <el-button type="primary" @click="handleAdd">新增角色</el-button>
                    <el-button type="primary" @click="flushCache">刷新缓存</el-button>
                </div>
            </div>
            <!--主体表格-->
            <div class="z-tables">
                <el-table ref="multipleTable" :data="roleList" style="width: 100%;" v-loading="loading">
                    <el-table-column fixed label="序号" type="index"></el-table-column>
                    <el-table-column prop="name" label="名称" min-width="200"></el-table-column>
                    <el-table-column prop="type" label="类型" :formatter="roleTypeFormatter" min-width="200"></el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="140" class-name="table-operate-td">
                        <template slot-scope="scope">
                                <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <span>|</span>
                                <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--分页-->
            <div class="grid-content">
                <div class="bg-purple-light">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script th:inline="javascript">
    app = new Vue({
        el: '#app',
        data: {
            title: [[${type}]] === 0 ? '平台角色' : '商户角色',
            loading: true,
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1,
            pageSize: 10,
            roleTypeList: [{name: "平台角色", value: 0}, {name: "商户角色", value: 1}],
            tableAllCheck: false,  // table 下方批量操作全选
            roleList: [],
            type: [[${type}]],
            conditions: {
                "name": {
                    "operation": "LIKE",
                    "value": ""
                },
                "type": {
                    "operation": "EQ",
                    "value": [[${type}]]
                }
            }
        },
        created: function () {
            this.queryRoleList();
        },
        methods: {
           	flushCache: function(){
           		var self = this;
        		$.post("/backstage/permission/permission/flushcache",{},function(data){
                    if (data && data.returnCode === 1) {
                        self.$message({
                            message: '刷新成功',
                            type: 'success',
                            customClass: 'message-center'
                        });
                    } else {
                        self.$message({
                            message: '刷新失败',
                            type: 'warning'
                        });
                    }
        		}
        	  );
        	},
            roleTypeFormatter(row, column, cellValue, position) {
                for (let type of this.roleTypeList) {
                    if (type.value === cellValue) {
                        return type.name;
                    }
                }
                return cellValue;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.queryRoleList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.queryRoleList();
            },
            handleQuery() {
                this.currentPage = 1;
                this.queryRoleList();
            },
            handleClear() {
                this.conditions.name.value = undefined;
                this.conditions.type.value = undefined;
            },
            handleAdd() {
                window.location.href = "/backstage/permission/role/toadd?type=" + this.type;
            },
            handleEdit(position, row) {
                window.location.href = "/backstage/permission/role/toedit/" + row.uuid + "?type=" + this.type;
            },
            handleDelete(position, row) {
                let self = this;
                self.$confirm('确认要删除此角色信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    $.ajax({
                        url: "/backstage/permission/role/delete",
                        type: "POST",
                        data: JSON.stringify([row.uuid]),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data) {
                            if (data && data.returnCode === 1) {
                                self.$message({
                                    message: '删除角色成功',
                                    type: 'success',
                                    customClass: 'message-center'
                                });
                                this.handleQuery();
                            } else {
                                self.$message({
                                    message: '删除角色失败',
                                    type: 'warning'
                                });
                            }
                        },
                        error: function () {
                            self.loading = false;
                            self.$message({
                                message: '出错了，请请稍后再试或联系管理员.',
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    });
                });
            },
            queryRoleList() {
           	    let self = this;
           	    self.loading = true;
                let queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {
                        "uuid": "desc"
                    }
                };
                $.ajax({
                    url: "/backstage/permission/role/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            self.roleList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                        self.loading = false;
                    }
                });
            }
        }
    });
</script>
</body>
</html>